import React, { useRef, useState } from 'react'
import { View, ScrollView, StyleSheet } from 'react-native';
import { CheckboxGroup, Checkbox, Icon, Button, } from '../../components';
import BaseView from '../components/base-view'
const CheckboxDemo = () => {
  const [checked1, setChecked1] = useState(["1"])
  const [checked2, setChecked2] = useState(["1"])
  const [checked3, setChecked3] = useState(["1"])
  const [checked4, setChecked4] = useState(["1"])
  const [checked5, setChecked5] = useState(["1"])
  const [checked6, setChecked6] = useState(["1"])
  const [checked7, setChecked7] = useState(["1"])
  const [checked8, setChecked8] = useState(["1"])
  const options = [
    {
      label: "多选1",
      value: "1",
    },
    {
      label: "多选2",
      value: "2",
    }
  ]
  const checkedRef = useRef<any>()
  const selectAll = () => {
    checkedRef.current.toggleAll(true)
  }
  const reverseSelect = () => {
    checkedRef.current.toggleAll()
  }
  return (
    <ScrollView style={{ backgroundColor: '#f2f2f2', flex: 1, width: '100%', height: '100%' }}>
      <BaseView title="基础用法">
        <CheckboxGroup checked={checked1} onChange={setChecked1}>
          <Checkbox value="1">多选1</Checkbox>
          <Checkbox value="2">多选2</Checkbox>
        </CheckboxGroup>
      </BaseView>
      <BaseView title="水平排列">
        <CheckboxGroup style={{ flexDirection: "row" }} checked={checked2} onChange={setChecked2}>
          <Checkbox value="1">多选1</Checkbox>
          <Checkbox value="2">多选2</Checkbox>
        </CheckboxGroup>
      </BaseView>
      <BaseView title="禁用状态">
        <CheckboxGroup disabled={true} checked={checked3} onChange={setChecked3}>
          <Checkbox value="1">多选1</Checkbox>
          <Checkbox value="2">多选2</Checkbox>
        </CheckboxGroup>
      </BaseView>
      <BaseView title="自定义颜色">
        <CheckboxGroup checked={checked4} checkedColor="#fed71a" onChange={setChecked4}>
          <Checkbox value="1">多选1</Checkbox>
          <Checkbox value="2">多选2</Checkbox>
        </CheckboxGroup>
      </BaseView>
      <BaseView title="自定义大小">
        <CheckboxGroup checked={checked5} iconSize={30} onChange={setChecked5}>
          <Checkbox value="1">多选1</Checkbox>
          <Checkbox value="2">多选2</Checkbox>
        </CheckboxGroup>
      </BaseView>
      <BaseView title="自定义图标">
        <CheckboxGroup checked={checked6} onChange={setChecked6} activeIcon={<Icon name="infocirlce" size={20} color="#f2481b"></Icon>} inactiveIcon={<Icon name="infocirlceo" size={20} color="#333"></Icon>}>
          <Checkbox value="1">多选1</Checkbox>
          <Checkbox value="2">多选2</Checkbox>
        </CheckboxGroup>
      </BaseView>
      <BaseView title="全选和反选">
        <CheckboxGroup ref={checkedRef} checked={checked7} onChange={setChecked7} >
          <Checkbox value="1">多选1</Checkbox>
          <Checkbox value="2">多选2</Checkbox>
          <Checkbox value="3">多选3</Checkbox>
          <Checkbox value="4">多选4</Checkbox>
        </CheckboxGroup>
        <View style={{ flexDirection: "row", marginLeft: 16 }}>
          <Button type='primary' onPress={selectAll} style={{ marginRight: 16 }}>全选</Button>
          <Button type='primary' onPress={reverseSelect}>反选</Button>
        </View>

      </BaseView>
      <BaseView title="options渲染选项">
        <CheckboxGroup options={options} checked={checked8} onChange={setChecked8}>
        </CheckboxGroup>
      </BaseView>
    </ScrollView>
  )
}

export default CheckboxDemo